---
title: "Object Position"
description: "用于控制被替换元素的内容在其容器中的位置。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/objectPosition'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## 使用方法

<!-- Use the `object-{side}` utilities to specify how a replaced element's content should be positioned within its container. -->
使用 `object-{side}` 功能来指定被替换的元素的内容在其容器中的位置。

```html amber
<template preview>
  <div class="grid grid-cols-3 gap-4">
    <div>
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Left Top</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-left-top object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div>
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Top</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-top object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div>
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Right Top</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-right-top object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div>
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Left</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-left object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div>
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Center</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-center object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div>
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Right</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-right object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div>
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Left Bottom</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-left-bottom object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Bottom</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-bottom object-none" src="/img/placeholder-square-amber.svg">
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-amber-600 font-medium mb-1">Right Bottom</p>
      <img class="mx-auto bg-amber-300 bg-stripes bg-stripes-white w-24 h-24 rounded-md overflow-hidden object-right-bottom object-none" src="/img/placeholder-square-amber.svg">
    </div>
  </div>
</template>

<img class="object-none **object-left-top** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-top** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-right-top** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-left** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-center** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-right** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-left-bottom** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-bottom** bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none **object-right-bottom** bg-yellow-300 w-24 h-24 ..." src="...">
```

## 响应式

<!-- To position an object only at a specific breakpoint, add a `{screen}:` prefix to any existing object position utility. For example, adding the class `md:object-top` to an element would apply the `object-top` utility at medium screen sizes and above. -->
要仅在特定的断点处定位对象，请在任何现有的对象定位功能类前添加 `{screen}:` 前缀。例如，将 `md:object-top` 类添加到一个元素中，就可以在中等大小和更大的屏幕上应用 `object-top` 功能类。

```html
<img class="object-center **md:object-top** ..." src="...">
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 对象定位

<!-- By default Tailwind provides nine object position utilities. You can change, add, or remove these by editing the `theme.objectPosition` section of your Tailwind config. -->
默认情况下，Tailwind 提供了九个对象位置功能类。您可以通过编辑您的 Tailwind 配置的 `theme.objectPosition` 部分来改变、添加或删除它们。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      objectPosition: {
        bottom: 'bottom',
        center: 'center',
        left: 'left',
-       'left-bottom': 'left bottom',
-       'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
+       'center-bottom': 'center bottom'
+       'center-top': 'center top',
      }
    }
  }
```

### 变体

<Variants plugin="objectPosition" />

### 禁用

<Disabling plugin="objectPosition" />
